<template>
	<view class="pagebg">
		<view id="container" style="width: 100vw; height: 100vh;"></view>
		<!-- <tabbarVue :current="0"></tabbarVue> -->
	</view>
</template>

<script setup>
	import tabbarVue from '@/components/tabbar/index.vue'
	import {
		loadJScript,
		createDOM
	} from '@/utils/BMapGL.js'
	import {
		ref,
	} from 'vue'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'

	const ak = ref('tk1c97qBl7PegAOyBk7UHbNQe97a2n4k')
	const map = ref(null)
	const markers = ref([{
		title: '故宫博物馆',
		bgColor: '#ffffff',
		imgSrc: 'https://bj.bcebos.com/v1/mapopen-pub-jsapigl/assets/images/gugong.png',
		pagePath: 'https://www.jsvry.com/p/Dv5v8Gjnam?scene_id=78346',
		point: {lng:116.404, lat:39.925}
	},{
		title: '故宫博物馆',
		bgColor: '#52CC6F',
		imgSrc: 'https://bj.bcebos.com/v1/mapopen-pub-jsapigl/assets/images/gugong.png',
		pagePath: 'https://www.jsvry.com/p/Dv5v8Gjnam?scene_id=78346',
		point: {lng:116.408, lat:39.929}
	},{
		title: '故宫博物馆',
		bgColor: '#1890FF',
		imgSrc: 'https://bj.bcebos.com/v1/mapopen-pub-jsapigl/assets/images/gugong.png',
		pagePath: 'https://www.jsvry.com/p/Dv5v8Gjnam?scene_id=78346',
		point: {lng:116.400, lat:39.921}
	}])

	const initBaiduMap = async () => {
		loadJScript(ak.value).then(async mymap => {
			map.value = new BMapGL.Map('container'); // 创建Map实例
			const point = new BMapGL.Point(116.404, 39.915)
			map.value.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
			map.value.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

			//默认标注点样式
			// // 创建点标记
			// var marker1 = new BMapGL.Marker(new BMapGL.Point(116.408, 39.925));

			// // 在地图上添加点标记
			// map.value.addOverlay(marker1);
			// console.log(map.value)

			markers.value.map(item => {
				console.log(item)
				addOverlay(item)
			})
		})
	}

	const addOverlay = (data) => {
		console.log(map.value)
		// 创建自定义覆盖物
		let customOverlay = new BMapGL.CustomOverlay(createDOM, {
			point: new BMapGL.Point(data.point.lng,data.point.lat),
			opacity: 0.5,
			offsetY: -32,
			properties: {
				title: data.title,
				imgSrc: data.imgSrc,
				bgColor: data.bgColor,
			}
		});
		map.value.addOverlay(customOverlay);
		customOverlay.addEventListener('click', function(e) {
			//点击后执行的code
			// let data = e.target.properties.title;
			uni.navigateTo({
				url: '/pages/webview/webview?url=' + decodeURIComponent(data.pagePath) + '&title=全景展示'
			})
		});
	}



	onLoad(() => {
		initBaiduMap();
	})
	onShow(() => {
		// uni.hideTabBar()
	})
</script>

<style>
	page {
		background: #ffffff;
	}
</style>
<style lang="scss" scoped>

</style>